<template>
  <div class="app-config-wrapper">
    <el-tabs v-model="showPanel" @tab-change="showPanelChange">
      <el-tab-pane name="baseData" label="基础数据">
        <SysDictConfiguration/>
      </el-tab-pane>

      <el-tab-pane name="form" label="表单设置">
        <AppFormList ref="refAppFormList"/>
      </el-tab-pane>

      <el-tab-pane name="menu" label="菜单设置">
        <AppMenuConfig ref="refAppMenuConfig"/>
      </el-tab-pane>

      <el-tab-pane name="permission" label="权限设置">
        <AppPermissionConfig ref="refAppPermissionConfig"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import AppFormList from '@/components/app/AppFormList.vue';
import AppMenuConfig from '@/components/app/menus/AppMenuConfig.vue';
import AppPermissionConfig from '@/views/plat/app/AppPermissionConfig/index.vue';
import {nextTick, onMounted, shallowRef} from 'vue';
import SysDictConfiguration from '@/views/plat/app/SysDictConfiguration/index.vue';

const refAppFormList = shallowRef();
const refAppMenuConfig = shallowRef();
const refAppPermissionConfig = shallowRef();

const showPanel = shallowRef('form');
onMounted(() => {
  showPanelChange();
});

function showPanelChange() {
  nextTick(() => {
    if (showPanel.value === 'form') {
      refAppFormList.value.active();
    }
    if (showPanel.value === 'menu') {
      refAppMenuConfig.value.active();
    }
    if (showPanel.value === 'permission') {
      refAppPermissionConfig.value.active();
    }
  });
}
</script>

<script>
export default {
  name: 'AppEditor'
};
</script>

<style>
.app-config-wrapper .el-tabs__nav-scroll {
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-config-wrapper .el-tabs__header {
  margin-bottom: 0;
}
</style>
